<template>
  <div>
    <!-- 知识搜索 -->
    <el-row>
      <el-col :span="24">
        <div class="knowledge-search">
          <span>知识搜索</span>
          <el-button type="primary" icon="el-icon-plus" style="float: right; margin-right: 10px;">新建</el-button>
          <el-button type="success" icon="el-icon-upload2" style="float: right;">文件上传</el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 搜索框 -->
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <div class="search-wrapper">
          <el-input
            placeholder="请输入内容"
            v-model="fileInfoQueryParams.fileName"
            class="elegant-input"
            @keyup.enter.native="handleSearch"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              class="elegant-button"
              @click="handleSearch"
            >
              搜索
            </el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>

    <!-- 最近活动 -->
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>最近</span>
            <el-button style="float: right; padding: 3px 0" type="text">更多 > </el-button>
          </div>
          <el-table :data="recentActivities" style="width: 100%">
            <el-table-column prop="title" label="文档标题" width="400px"></el-table-column>
            <el-table-column prop="author" label="文档作者" width="400px"></el-table-column>
            <el-table-column prop="viewTime" label="最近浏览时间" ></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {listInfo} from "@/api/file/info";

export default {
  data() {
    name:"search"
    return {
      recentActivities: [
        { title: '市场调研文档', author: '赵六', viewTime: '2023-06-15 14:30' },
        { title: '产品需求文档', author: '李四', viewTime: '2023-06-14 09:15' },
        { title: '产品进度文档', author: '张三', viewTime: '2023-06-13 16:45' },
      ],
      list:'',
      fileInfoQueryParams: {
        pageNum: 1,
        pageSize: 10,
        fileSize: null,
        fileCategoryId: null,
        uploadBy: null,
        uploadTime: null,
        status: null,
        permission: null,
        fileName:null,
      },
      }
    },
  methods:{
    handleSearch(){
      listInfo(this.fileInfoQueryParams).then(response => {
        this.list=response.rows;
      })
    }
  }
}
</script>

<style scoped>
.knowledge-search {
  border-bottom: 1px solid #ebeef5;
  padding: 10px 0;
}
.search-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
.elegant-input {
  width: 60%;
  border-radius: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
}

.elegant-input ::v-deep .el-input__inner {
  border-radius: 30px;
  padding-right: 110px;
  font-size: 15px;
  height: 42px;
  border: 1px solid #e4e4e4;
  transition: border-color 0.3s ease;
}

.elegant-input ::v-deep .el-input-group__append {
  border-radius: 0 30px 30px 0;
  background-color: #ffffff;
  border-left: none;
  padding: 0 20px;
}

.elegant-button {
  color: #141515;
  font-weight: 500;
  transition: all 0.3s ease;
}

.elegant-button:hover {
  background-color: #f5f7fa;
  color: #333;
}
.box-card {
  width: 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>
